<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <!-- 
            页面中有一个 ul , ul内部会通过后台数据提供完成 li 的定义
        问题：1、具体多少个 li 未知
             2、每个li都需要能够触发 click 事件,并可传递当前li对应的值
        问：1、怎么为li的事件绑定
            2、能否完成浏览器的性能优化?

            冒泡的事件方式完成子元素的事件触发：事件委托   
            通过事件捕获方式完成父元素的事件触发：事件代理  
        -->
        <ul id="ul">

        </ul>
</body>
<script>
    var arr=[1,2,3,4,5,6,7];//未知个数量的数组（假设有这么多)
    var ulDom=document.getElementById("ul");//获取ul的DOM元素
    for(let i=0,len=arr.length;i<len;i++){//进入循环
        var li=document.createElement("li");//每循环一次，生成一个li标签元素
        li.setAttribute("data-item",arr[i]);//为每个生成的li标签添加属性，且属性值为每次循环的数组 值
        li.innerText=arr[i];//为每个生成的li标签元素添加文本内容，内容为每次循环的数组 值
        ulDom.appendChild(li);//将每次生成的li标签元素加入到ul标签中去
    }
    ulDom.addEventListener("click",function(event){//为ul标签元素绑定点击事件，其内的li元素也都具有了点击事件
        console.log(event);//得到每次点击的li元素标签的全部属性
        console.log(event.target);//以上还是属于冒泡传递（此时参数未加true)
        console.log(event.target.getAttribute("data-item"));
        event.stopPropagation();//改为捕获传递后，阻止了ul父元素的事件触发，仅触发了所点击li元素的事件，完成了浏览器的性能优化。
    },true)
</script>
</html>